import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Statistic, Row, Col, Button, Collapse, Badge, Space } from 'antd';
import PageHeaderContent from '@/components/PageHeaderContent';
import { Link, connect } from 'umi';
import G2Line from './Charts/G2Line';
import G2PieBaisc from './Charts/G2PieBaisc';
import G2Bar from './Charts/G2Bar';
import { SettingOutlined, SyncOutlined } from '@ant-design/icons';
import { getCurrent } from '@/services/user';
import IconFont from '@/components/Iconfont';
import { GetAll, GetVTrade, GetPieData } from '../services/crud';
import moment from 'moment';

const { Panel } = Collapse;
const handle = (property: any) => {
  return function (a: any, b: any) {
    const val1 = a[property];
    const val2 = b[property];
    return val1 - val2;
  };
};
class Welcome extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      visible: false,
      memberCount: 0,
      tradeAmt: 0,
      vTradeData: [],
      pieDataMember: [],
      pieDataKeyword: [],
      colDataTrade: [],
    };
  }
  componentDidMount() {
    this.fetchUsers();
    this.fetchTradeInfo();
  }
  fetchTradeInfo = async () => {
    this.setState({ loading: true });
    await GetAll({ SkipCount: 0, MaxResultCount: 99999999 }, 'Members').then((resp) => {
      this.setState({ memberCount: resp.result.totalCount });
    });
    await GetAll({ SkipCount: 0, MaxResultCount: 99999999 }, 'Edu_Trade').then((resp) => {
      var items = resp.result?.items;
      var amt = 0;
      if (items) {
        items.forEach((element: any) => {
          amt += element.tradeAmt;
        });
        this.setState({ tradeAmt: amt });
      }
    });
    await GetVTrade({ cType: '交易额', days: -30 }).then((resp) => {
      var items: any = [];
      if (resp) {
        resp.result?.forEach((element: any) => {
          element.day = moment(element.day).format('MM-DD');
          items.push(element);
        });
      }

      this.setState({ vTradeData: items, loading: false });
      this.g2Line.loadData();
    });

    await GetPieData({}, 'Members').then((resp) => {
      this.setState({ pieDataMember: resp.result, loading: false });
      this.g2Pie.loadData();
    });

    await GetPieData({}, 'Edu_KeywordLib').then((resp) => {
      var datas: any = resp.result.sort(handle('value'));
      this.setState({ pieDataKeyword: datas, loading: false });
      this.g2PieKey.loadData();
    });

    await GetPieData({}, 'Edu_Trade').then((resp) => {
      this.setState({ colDataTrade: resp.result, loading: false });
      //this.g2Col.loadData();
    });
  };
  fetchUsers = async () => {
    this.setState({ loading: true });
    let props: API.PageProps = this.props;
    const resp = await getCurrent();
    let currentUser = resp.result.user;
    props.dispatch({
      type: 'Abp/setCurrent',
      payload: currentUser,
    });
  };
  onFinish = () => {
    console.log('finished!');
  };
  genExtra = (event: any) => {
    console.log(event);
  };
  g2Line: any = React.createRef();
  onRef = (ref: any) => {
    this.g2Line = ref;
  };
  g2Pie: any = React.createRef();
  onRefPie = (ref: any) => {
    this.g2Pie = ref;
  };
  g2PieKey: any = React.createRef();
  onRefPieKey = (ref: any) => {
    this.g2PieKey = ref;
  };
  g2Col: any = React.createRef();
  onRefCol = (ref: any) => {
    this.g2Col = ref;
  };
  render() {
    return (
      <PageContainer content={<PageHeaderContent />}>
        <div style={{ marginBottom: 16 }}>
          <Space>
            <Button
              type="primary"
              onClick={this.fetchTradeInfo}
              loading={this.state.loading}
              icon={<SyncOutlined />}
            >
              {' '}
              最新数据{' '}
            </Button>
            <Link to="./opmanage/opconfig">
              <Button icon={<SettingOutlined />}>运营设置</Button>
            </Link>
          </Space>
        </div>

        <Row gutter={[16, 16]}>
          <Col xs={24} sm={24} md={24} lg={12} xl={12}>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Card hoverable={true}>
                  <Statistic
                    title="会员总数"
                    value={this.state.memberCount}
                    precision={0}
                    valueStyle={{ color: '#3f8600' }}
                    prefix={<IconFont type="icon-user" />}
                    suffix="pcs"
                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card hoverable={true}>
                  <Statistic
                    title="总交易额"
                    value={this.state.tradeAmt}
                    precision={2}
                    valueStyle={{ color: '#cf1322' }}
                    prefix={<IconFont type="icon-cny" />}
                    suffix="CNY"
                  />
                </Card>
              </Col>
            </Row>
            <Collapse defaultActiveKey={['1']} expandIconPosition="right">
              <Panel
                header={
                  <span>
                    <Badge status="processing" text="业务数据汇总" />{' '}
                  </span>
                }
                key="1"
                extra={<SettingOutlined onClick={() => this.genExtra} />}
              >
                <G2Line ParentData={this.state.vTradeData} onRef={this.onRef} height={360} />
              </Panel>
            </Collapse>
          </Col>
          <Col xs={24} sm={24} md={24} lg={12} xl={12}>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Card title="会员分布" hoverable={true}>
                  <G2PieBaisc
                    ParentData={this.state.pieDataMember}
                    onRef={this.onRefPie}
                    height={300}
                    ele="pieDataMember"
                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card title="用户搜索" hoverable={true}>
                  {/* <G2Column ParentData={this.state.colDataTrade} onRef={this.onRefCol} height={300} /> */}
                  <G2Bar
                    ParentData={this.state.pieDataKeyword}
                    onRef={this.onRefPieKey}
                    height={300}
                  />
                </Card>
              </Col>
              <Col span={24}></Col>
            </Row>
          </Col>
        </Row>
      </PageContainer>
    );
  }
}

export default connect(({ Abp }: API.IConnectState) => ({
  Abp,
}))(Welcome);
